<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" label-width="100px">
                    <el-row>
                        <div align="center">
                            <el-button type="primary" icon="el-icon-search" @click="search">
                                查询
                            </el-button>
                            <el-button type="primary" icon="el-icon-refresh" @click="refresh">
                                刷新
                            </el-button>
                        </div>
                    </el-row>
                </el-form>
            </div>
            <div class="handle-box" style="margin-bottom:20px;">
                <el-button type="primary" icon="el-icon-lx-add" @click="add">添加</el-button>
                <el-button type="primary" icon="el-icon-edit" @click="edit">编辑</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="del">删除</el-button>
                <el-button type="primary" icon="el-icon-lx-searchlist" @click="check">查看详情</el-button>
            </div>
            <ces_table ref="cestable" :that='that'
                       size='small'
                       :tableHeight='tableHeight'
                       :stripe="true"
                       :isIndex='true'
                       :isHandle='true'
                       :isSelection='false'
                       :radioSelection='true'
                       :isPagination='true'
                       :tableData='tableData'
                       :tableCols='tableCols'
                       :tablePage='pagination'
                       @dbClick="check"
                       @handleSelectionChange='handleSelectionChange'
                       @handleCurrentChange='handleCurrentChange'
                       @handleSizeChange="handleSizeChange">
            </ces_table>
            <!--添加 编辑 查看操作界面-->
            <add_edit_check :visible="addEditCheck.visible" :data="addEditCheck.data"
                            :titleName="addEditCheck.titleName"></add_edit_check>
        </div>
    </div>
</template>

<script>
    /*列表封装页面引入*/
    import ces_table from '@cores/commons/main/Table'
    /*添加、编辑、查看页面引入*/
    import add_edit_check from './add-edit-check'

    export default {
        components: {
            ces_table,
            add_edit_check,
        },
        provide() {
            return {
                /*向子页面传值方法*/
                refresh: this.refresh,
            }
        },
        data() {
            return {
                that: this,
                /*动态计算页面表格高度*/
                tableHeight: window.innerHeight - 380,
                /*查询请求*/
                url_page: '/select',
                /*删除请求*/
                url_del: '/delete',
                /*勾选内容*/
                multipleSelection: [],
                /*表头及字段*/
                tableCols: [],
                /*列表数据*/
                tableData: [],
                /*分页*/
                pagination: {
                    pageSize: 10, pageNum: 1, total: 0
                },
                /*查询条件*/
                form: {
                    page: '1', limit: '10',
                },
                /*字典*/
                dics: {},
                /*子页面传值*/
                addEditCheck: {
                    titleName: '', visible: false, data: {optTyle: '', dics: {}}
                },
            }
        },
        created() {
            this.initDict();
            this.getPages();
        },
        methods: {
            //变更分页条数
            handleSizeChange(val) {
                this.form.limit = val;
                this.getPages();
            },
            //变更上一页下一页
            handleCurrentChange(val) {
                this.form.page = val;
                this.getPages();
            },
            //选中table行
            handleSelectionChange(val) {
                this.$refs.cestable.clearSelect();
                this.multipleSelection = val;
            },
            /*初始化字典*/
            initDict() {
                //
            },
            //查询数据
            getPages() {
                this.addEditCheck.visible = false;
                this.form.limit = this.pagination.pageSize;
                this.$post(this.url_page, this.form).then(res => {
                    if (res.data) {
                        this.tableData = res.data.list;
                        this.pagination.total = res.data.total;
                    } else {
                        this.$message({type: res.code, message: res.msg});
                    }
                })
            },
            //刷新
            refresh() {
                this.$refs.cestable.clearRadioSelection();
                this.multipleSelection = [];
                this.addEditCheck.data = [];
                this.pagination = {pageSize: 10, pageNum: 1, total: 10};
                this.form = {page: '1', limit: '10'};
                this.getPages();
            },
            /*查询*/
            search() {
                this.$refs.cestable.clearRadioSelection();
                this.multipleSelection = [];
                this.getPages();
            },
            /*添加*/
            add() {
                this.addEditCheck.data = {};
                this.addEditCheck.visible = true;
                this.addEditCheck.data.optTyle = 'add';
                this.addEditCheck.data.dics = this.dics;
                this.addEditCheck.titleName = '添加';
            },
            /*编辑*/
            edit() {
                let row = this.multipleSelection;
                if (row.length > 0) {
                    this.addEditCheck.data = row[0];
                    this.addEditCheck.visible = true;
                    this.addEditCheck.data.optTyle = 'edit';
                    this.addEditCheck.data.dics = this.dics;
                    this.addEditCheck.titleName = '编辑';
                } else {
                    this.$message({type: '', message: '请选中一条数据进行编辑'});
                }
            },
            /*删除*/
            del() {
                let row = this.multipleSelection;
                if (row.length > 0) {
                    this.$confirm('确定要删除数据吗？', '提示', {
                        confirmButtonText: '确定', cancleButtonText: '取消', type: 'warning'
                    }).then(() => {
                        this.$post(this.url_del, {id: row[0].id}).then(res => {
                            if ('success' === res.code) {
                                this.$message({type: res.code, message: res.msg});
                                this.refresh();
                            } else {
                                this.$message({type: res.code, message: res.msg});
                            }
                        })
                    }).catch(() => {
                        this.refresh();
                    });
                } else {
                    this.$message({type: '', message: '请选中一条数据进行删除'});
                }
            },
            /*查看详情*/
            check() {
                let row = this.multipleSelection;
                if (row.length > 0) {
                    this.addEditCheck.data = row[0];
                    this.addEditCheck.visible = true;
                    this.addEditCheck.data.optTyle = 'check';
                    this.addEditCheck.data.dics = this.dics;
                    this.addEditCheck.titleName = '查看详情';
                } else {
                    this.$message({type: '', message: '请选中一条数据进行查看详情'});
                }
            },
            /*渲染表格字典*/
            renderDict(h, params, field) {
                let text = params.row[field];
                this.dics[field].forEach((r) => {
                    if (r.dict_code === params.row[field]) {
                        text = r.dict_name;
                    }
                });
                return h('span', {}, text);
            },
            /*渲染日期*/
            dateFormat(h, params, field) {
                return h('span', {}, params.row[field] ? this.dateFormatYMD(params.row[field]) : "");
            },
            /*渲染日期*/
            dateFormatYMD(dat) {
                return this.$dateFormat(dat).format('YYYY-MM-DD');
            },
        }
    }
</script>
<style scoped>
    @import "../../../../assets/css/common.css";
</style>
